if(getCookie('username') == ''){
    location.href = './index.html'
}
//商品列表数据
var productList
if(localStorage.getItem(getCookie('username'))){
    productList = JSON.parse(localStorage.getItem(getCookie('username')))
  }else{
    productList = []
  }
let checkAllState = false //全选状态

const tableEle = document.querySelector('table')
/**
 * 动态加载商品列表数据
 */
let loadProductList = () => {
    //初始化模板字符串，表格头部th
    let str = `<tr>
                    <th><input type="checkbox" name="checkall" ${checkAllState ? 'checked' : ''}> 全选</th>
                    <th>序号</th>
                    <th>商品图片</th>
                    <th>商品信息</th>
                    <th>单价</th>
                    <th>数量</th>
                    <th width="100px">总价</th>
                    <th>操作</th>
                </tr>`

    //循环生成商品列表项
    $.each(productList,function(key,item){
        let trStr = `<tr>
                        <td><input type="checkbox" data-index="${item.id}" name="checksingle" ${item.state ? 'checked' : ''}></td>
                        <td>${item.id}</td>
                        <td><img src="${item.url}" alt=""></td>
                        <td style="width:40px">${item.name}</td>
                        <td>￥${item.price}</td>
                        <td> <input name="minus" type="button" value="-" ${item.num == 0 ? 'disabled' : ''} ><input type="text" name="amount" value="${item.num}"><input
                                type="button" name="plus" value="+"></td>
                        <td>￥${item.singlePrice}</td>
                        <td><a href="#">移入收藏</a> <br /><a href="javascript:;" class="del">删除</a></td>
                    </tr> `

        str += trStr //字符串拼接
    })
    // productList.forEach(function (item) {
    //     let trStr = `<tr>
    //                     <td><input type="checkbox" data-index="${item.id}" name="checksingle" ${item.state ? 'checked' : ''}></td>
    //                     <td>${item.id}</td>
    //                     <td><img src="${item.url}" alt=""></td>
    //                     <td>${item.name}</td>
    //                     <td>￥${item.price}</td>
    //                     <td> <input name="minus" type="button" value="-" ${item.num == 0 ? 'disabled' : ''} ><input type="text" name="amount" value="${item.num}"><input
    //                             type="button" name="plus" value="+"></td>
    //                     <td>￥${item.singlePrice}</td>
    //                     <td><a href="#">移入收藏</a> <br /><a href="javascript:;" class="del">删除</a></td>
    //                 </tr> `

    //     str += trStr //字符串拼接
    // })
    //将动态生成商品列表字符串作为table的内容显示
    // tableEle.innerHTML = str
    $('table').html(str)
    //计算总价
    totalPrice()
    localStorage.setItem(getCookie('username'),JSON.stringify(productList))
}

/**
 * 操作商品
 *   1.加一： 点击加号，找到数组中对应商品元素，商品num属性值加一
 *      事件: 1.循环给每个加号绑定事件
 *            2. 事件委托父元素处理
 *   2.单个商品总价:  点击加号，找到数组中对应商品元素， 让商品数量*商品价格 赋值给单个商品总价
 *   3. 减一: 点击减号，找到数组中对应商品元素,商品数量num属性值减一
 *   
 *   4. 删除商品项： 点击删除按钮， 查找对应商品在数组中的索引号，使用splice截取数组元素
 *     
 */



; (
    function () {
        $('table').on('click', 'input[name="plus"]', function () {
            //找到数组中对应商品元素，商品num属性值加一
            //1. 查找条件id
            let id = $(this).parent().parent().children().first().children().attr('data-index')
            // let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            // let id = idEle.getAttribute('data-index') //当前点击商品ID

            // //从数组中查找满足条件的第一个元素 find
            let product = productList.find(item => item.id == id)
            // //数量加一
            product.num++

            // //计算商品个商品总价
            product.singlePrice = (product.price * product.num).toFixed(2)

            // //重新加载商品数组数据
            loadProductList()
        }).on('click', 'input[name="minus"]', function () {
            //找到数组中对应商品元素,商品数量num属性值减一
            //1. 查找条件id
            let id = $(this).parent().parent().children().first().children().attr('data-index')
            // let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            // console.log(idEle);
            // let id = idEle.getAttribute('data-index') //当前点击商品ID //当前点击商品ID
            // console.log(id);

            //从数组中查找满足条件的第一个元素 find
            let product = productList.find(item => item.id == id)
            product.num-- //数量减一

            //计算商品个商品总价
            product.singlePrice = (product.price * product.num).toFixed(2)

            //重新加载商品数组数据
            loadProductList()
        }).on('click','.del',function () {  
            //查找对应商品在数组中的索引号
            //1. 查找条件id
            // let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            // let id = idEle.getAttribute('data-index') //当前点击商品ID
            let id = $(this).parent().parent().children().first().children().attr('data-index')
            console.log(id);
            //商品在数组中的索引号
            // let index = -1
            // for (let i = 0; i < productList.length; i++) {
            //     if (productList[i].id == id) {
            //         index = i
            //         break
            //     }
            // }
            //查找数组中满足条件的索引号
            let index = productList.findIndex(item => item.id == id)

            //使用splice截取数组元素
            productList.splice(index, 1)

            //重新加载商品数组数据
            loadProductList()
        }).on('click','input[name="checkall"]',function () {  
            checkAllState = !checkAllState

            productList.forEach(item => item.state = checkAllState)

            loadProductList()
        }).on('click','input[name="checksingle"]',function () {  
            let id = $(this).attr('data-index')
            let product = productList.find(item => item.id == id)
            product.state = !product.state

            checkAllState = productList.every(item => item.state == true)

            loadProductList()  
        })
    }
)()


/**
 * 所有商品总价
 *   遍历数组将singlePrice 累加求和
 */
function totalPrice() {
    let sum = 0 //累加和
    for (let i = 0; i < productList.length; i++) {
        let singlePrice = productList[i].singlePrice
        sum = sum + Number(singlePrice)
    }
    const totalPriceEle = document.querySelector('.total-price')
    totalPriceEle.innerHTML = `￥${sum.toFixed(2)}`

    let ssum = 0
    for (let j = 0; j < productList.length; j++) {
        console.log(productList[j].state);
        if(productList[j].state){
            let singlePrice = productList[j].singlePrice
            ssum = ssum + Number(singlePrice)
        }
    }
    const totalPriceEle1 = document.querySelector('.total-price1')
    totalPriceEle1.innerHTML = `￥${ssum.toFixed(2)}`
}

loadProductList()
// onProduct()


function onProduct() {
    tableEle.addEventListener('click', function (e) {
        e = e || window.event //事件对象
        let target = e.target || e.srcElement //事件目标对象
        //加一操作
        if (target.value == '+') {
            //找到数组中对应商品元素，商品num属性值加一
            //1. 查找条件id
            let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            let id = idEle.getAttribute('data-index') //当前点击商品ID

            //从数组中查找满足条件的第一个元素 find
            let product = productList.find(item => item.id == id)
            //数量加一
            product.num++

            //计算商品个商品总价
            product.singlePrice = (product.price * product.num).toFixed(2)

            //重新加载商品数组数据
            loadProductList()
        }
        //减一操作
        if (target.value == '-') {
            //找到数组中对应商品元素,商品数量num属性值减一
            //1. 查找条件id
            let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            console.log(idEle);
            let id = idEle.getAttribute('data-index') //当前点击商品ID //当前点击商品ID
            console.log(id);

            //从数组中查找满足条件的第一个元素 find
            let product = productList.find(item => item.id == id)
            product.num-- //数量减一

            //计算商品个商品总价
            product.singlePrice = (product.price * product.num).toFixed(2)

            //重新加载商品数组数据
            loadProductList()
        }

        //删除功能
        if (target.getAttribute('class') == 'del') {
            //查找对应商品在数组中的索引号
            //1. 查找条件id
            let idEle = target.parentNode.parentNode.firstElementChild.firstElementChild
            let id = idEle.getAttribute('data-index') //当前点击商品ID

            //商品在数组中的索引号
            // let index = -1
            // for (let i = 0; i < productList.length; i++) {
            //     if (productList[i].id == id) {
            //         index = i
            //         break
            //     }
            // }
            //查找数组中满足条件的索引号
            let index = productList.findIndex(item => item.id == id)

            //使用splice截取数组元素
            productList.splice(index, 1)

            //重新加载商品数组数据
            loadProductList()
        }
        //全选状态
        if (target.getAttribute('name') == 'checkall') {

            checkAllState = !checkAllState

            productList.forEach(item => item.state = checkAllState)

            loadProductList()
        }
        //复选框状态
        if (target.getAttribute('name') == 'checksingle') {

            let id = target.getAttribute('data-index')
            let product = productList.find(item => item.id == id)
            product.state = !product.state

            checkAllState = productList.every(item => item.state == true)

            loadProductList()
        }

    })
}

document.querySelector('.toIndex>button').onclick = function () {  
    location.href = './index.html'
}